<template>
  <view class="container">
    <scroll-view
      class="comment-list"
      scroll-y
      @scrolltolower="loadMore"
    >
      <!-- 无数据提示 -->
      <view v-if="!loading && commentList.length === 0" class="empty-tips">
        <image src="/static/empty.png" class="empty-image" />
        <text class="empty-text">暂无发出的评论</text>
      </view>

      <!-- 评论列表 -->
      <template v-else>
        <view
          v-for="(item, index) in commentList"
          :key="index"
          class="comment-item"
        >
          <view class="pic-container" v-if="item.pics">
            <image
              :src="item.pics"
              mode="aspectFill"
              class="comment-pic"
            />
          </view>
          <text class="comment-content">您的评论：{{ item.content }}</text>
          <view class="info-footer">
            <text class="time-text">发送时间：{{ formatTime(item.recTime) }}</text>
            <text
              v-if="item.isAnonymous === 1"
              class="anonymous-badge"
            >
              匿名评价
            </text>
          </view>
        </view>

        <!-- 加载状态 -->
        <uni-load-more
          :status="loading ? 'loading' : 'noMore'"
          v-if="commentList.length > 0"
        />
      </template>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import http from '../../utils/http'

interface CommentItem {
  pics: string
  content: string
  recTime: string
  isAnonymous: number
}

const commentList = ref<CommentItem[]>([])
const currentPage = ref(1)
const total = ref(0)
const loading = ref(false)
const hasMore = ref(true)

// 时间格式化
const formatTime = (timeStr: string) => {
  const date = new Date(timeStr)
  const pad = (n: number) => n.toString().padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
}

// 加载数据
const loadData = async (reset = false) => {
  if (loading.value || !hasMore.value) return

  try {
    loading.value = true
    if (reset) currentPage.value = 1

    const res = await http.request({
      url: '/prodComm/prodCommPageByUser',
      method: 'GET',
      params: {
        current: currentPage.value,
        size: 10
      }
    })

    total.value = res.data.total
    hasMore.value = currentPage.value < Math.ceil(res.data.total / 10)

    if (reset) {
      commentList.value = res.data.records
    } else {
      commentList.value = [...commentList.value, ...res.data.records]
    }

    currentPage.value++
  } catch (error) {
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 初始化加载
onLoad(() => {
  loadData(true)
})

// 触底加载
const loadMore = () => {
  if (hasMore.value) loadData()
}

// 下拉刷新
onPullDownRefresh(() => {
  loadData(true)
  uni.stopPullDownRefresh()
})
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  background: #f5f5f5;
}

.comment-list {
  padding: 20rpx;
  height: 100%;
}

.empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;

  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
  }
}

.comment-item {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);

  .pic-container {
    margin-bottom: 20rpx;

    .comment-pic {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
    }
  }

  .comment-content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }

  .info-footer {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time-text {
      font-size: 24rpx;
      color: #999;
    }

    .anonymous-badge {
      background: #eeeeee;
      color: #666;
      font-size: 22rpx;
      padding: 6rpx 16rpx;
      border-radius: 20rpx;
    }
  }
}
</style>
